<template>
  <div class="detail-container">
    <!-- 头图 -->
    <TopTheme
      height="200px"
      bg="toppic03.png"
      title="橙券新闻动态"
      des1="新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步！" />
    <!-- 新闻内容 -->
    <div class="news-detail w1200">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/news' }">新闻动态</el-breadcrumb-item>
        <el-breadcrumb-item>{{ title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="news-detail-content">
        <h2>{{ title }}</h2>
        <div class="date">{{ updatedAt }}</div>
        <main v-html="content"></main>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsDetail',
  data() {
    return {
      title: '',
      content: '',
      updatedAt: ''
    }
  },
  methods: {
    async getNewsDetail() {
      const { id } = this.$route.params
      // 获取新闻详情
      const { data } = await this.$req(`/news/${id}`, 'get')
      const { title, content, updatedAt } = data
      this.title = title
      this.content = content
      this.updatedAt = updatedAt
    }
  },
  created() {
    this.getNewsDetail()
  }
}
</script>

<style lang="scss" scoped>
.news-detail {
  margin-bottom: 60px;
  padding-top: 50px;
  .news-detail-content {
    min-height: 200px;
    & > h2 {
      margin-top: 60px;
      text-align: center;
      font-size: 30px;
    }
    & > .date {
      margin-top: 20px;
      text-align: center;
      font-size: 16px;
      color: #110808;
    }
    & > main {
      margin-top: 30px;
      font-size: 16px;
    }
  }
}
</style>
